<template>
  <div
    style="width:450px;height:300px"
    ref="chart"
  ></div>
</template>

<script>
// 设备信息视图*******
import * as echarts from "echarts";
export default {
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      let myChart = this.$echarts.init(this.$refs.chart);
      console.log(this.$refs.chart); // 绘制图表
      myChart.setOption({
        tooltip: {},
        // legend: {
        //   data: ["预算分配（Allocated Budget）", "实际开销（Actual Spending）"]
        // },
        radar: {
          // shape: 'circle',
          center : ['50%', '55%'],
           radius:"55%",
          name: {
            textStyle: {
              color: "#0ae7f8",
               fontSize : 15 ,
              // backgroundColor: '#999',
              borderRadius: 10,
              padding: [3, 5]
            }
          },
          indicator: [
            { name: "短路报警", max: 16000 },
            { name: "浪涌报警", max: 65000 },
            { name: "温度报警", max: 30000 },
            { name: "欠压报警", max: 38000 },
            { name: "过载报警", max: 150000 },
            { name: "过流报警", max: 52000 },
            { name: "漏电报警", max: 50500 },
            { name: "三相报警", max: 60500 }
          ],
          splitLine: {
            lineStyle: {
              color: "#05396c"
            }
          },
          splitArea: {
            areaStyle: {
              color: ["#010e46", "#010e46"]
            }
          },
          axisLine: {
            lineStyle: {
              color: "#075994"
            }
          }
        },
        series: [
          {
            name: "报警统计统计",
            type: "radar",
            symbol: "circle",
            symbolSize: "8",
            data: [
              {
                value: [4300, 10000, 28000, 35000, 50000, 19000,35000, 50000, 19000],
                name: "报警统计",
                lineStyle: {
                  color: "#0a78b5"
                },
                itemStyle: {
                  color: "#e0c92a",
                  borderColor: "#065d95"
                },
                areaStyle: {
                  color: "#065d95",
                  offset: 0.5
                }
              }
            ]
          }
        ]
      });
    }
  }
};
</script>

<style>
</style>